<!-- 「我的账户」页面 -->
<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar class="nav-bar" title="我的账户" statusBar="true" leftIcon="left" @clickLeft="back" :border="false"
      backgroundColor="#00000000"></uni-nav-bar>
    <!-- 账户余额 -->
    <div class="balance">
      <image class="balance-bg" src="@/static/images/mine/balance-bg.svg"></image>
      <div class="balance-content">
        <div class="balance-title">账户余额（元）</div>
        <span class="balance-num">
          <span class="symbol">￥</span>{{ userInfo.money_remain }}
        </span>
        <!-- 「提现」按钮 -->
        <button class="withdraw-btn" @click="navigateTo('withdraw-immediately')">
          <span class="withdraw-btn-text">提现</span>
          <image class="withdraw-btn-arrow" src="@/static/icons/common/right-arrow-white.svg"></image>
        </button>
      </div>
    </div>
    <!-- 账单明细 -->
    <div class="bill">
      <div class="bill-title">明细</div>
      <BillList :billList="billList" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { useUser } from '@/stores/user-store';
import { back, navigateTo } from '@/utils/navigate';
import { storeToRefs } from 'pinia';
import { takeOutList } from '@/api/api-user'
import { showToast } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app'
import BillList from '@/components/bill-list.vue'

const userStore = useUser()
const { userInfo } = storeToRefs(userStore)

/** 明细列表 */
const billList: BillListItem[] = reactive<BillListItem[]>([]);

onShow(() => {
  const isReloadList = uni.getStorageSync('reloadList');
  if (isReloadList) {
    getList();
    uni.removeStorageSync('reloadList')
  }
})
onMounted(() => {
  getList();
})

/** 获取明细列表 */
const getList = async () => {
  const res: any = await takeOutList();
  console.log('明细列表', res);
  const target = res.data.data;
  billList.splice(0);
  if (target) {
    target.forEach((item: any, index: number) => {
      const { wx_headimg: avatar, redsum: amount, finish_time: time } = item;
      const newItem = {
        id: String(index + 1),
        avatar,
        amount,
        time,
        title: '提现'
      }
      billList.push(newItem)
    })
  } else {
    showToast('获取失败，请稍后重试')
  }
}

</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  display: grid;
  grid-template:
    'nav-bar' auto
    '.' 20px
    'balance' 38.7179vw
    '.' 18px
    'bill' 1fr;

  // 账户余额
  .balance {
    grid-area: balance;
    justify-self: center;
    align-self: center;

    width: calc(100vw - 40px);
    height: 100%;

    position: relative;

    .balance-bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;

      width: 100%;
      height: 100%;
    }

    // 余额内容
    .balance-content {
      height: 100%;
      display: grid;
      grid-template:
        'balance-title balance-title' 1fr
        'balance-num withdraw-btn' 1fr
        / 1fr 15.8974vw;
      padding: 40px 25px;

      .balance-title {
        grid-area: balance-title;
        font-size: 14px;
        color: #ffffffcb;
      }

      // 余额数字
      .balance-num {
        grid-area: balance-num;
        align-self: end;
        font-size: 8.9744vw;
        color: #ffffff;

        .symbol {
          font-size: 5.1282vw;
        }
      }

      // 「提现」按钮
      .withdraw-btn {
        grid-area: withdraw-btn;
        width: 15.8974vw;
        height: 6.4103vw;
        background: rgba(255, 255, 255, 0.20);
        border: 1px solid #ffffff;
        border-radius: 38px;

        display: flex;
        justify-content: center;
        align-items: center;

        .withdraw-btn-text {
          font-size: 3.0769vw;
          color: #ffffffc2;
        }

        .withdraw-btn-arrow {
          width: 13px;
          height: 16px;
          margin-left: 5px;
        }
      }
    }
  }

  // 账单明细
  .bill {
    grid-area: bill;

    .bill-title {
      padding: 6px 20px;

      font-size: 12px;
      color: #848a9a;
      line-height: 17px;

      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
